<template>
	<view>
		<view class="game-box">
			<!-- <wormjan-jigsaw></wormjan-jigsaw> -->
			<view class="tip-box">
				<view class="tip">{{tip}}</view>
				<view class="tip-desc" v-if="tipFlag">请耐心等待敌人出现</view>
				<view class="tip-desc" v-if="shareFlag">你的反应秒杀99%的玩家</view>
				<view class="tip-desc" v-if="shareFlag">赶快截屏去发朋友圈吧</view>
			</view>
			<view class="img-box">
				<image class="img" :src="img"></image>
				<!-- <view class="img-line"></view>
				<view class="img-top"></view>
				<view class="img-dot"></view> -->
			</view>
			<view class="submit-btn" v-if="isOk" @click="submitBtn">上传战绩{{tip}}至排行榜</view>
			<view class="play-btn" @click="startGame">{{playText}}</view>
		</view>
		
		<view class="left-box">
			<view class="rank-btn" @click="ranBtn">我的排名</view>
		</view>
		
<!-- 		<view class="right-box">
			<view class="tab-btn" @click="addBtn">脱单交友</view>
			<button class="tab-btn" open-type="share">分享</button>
		</view> -->
		 
	</view>
</template>


<script>
	export default {
		data() { 
			return {
				background: {
					backgroundColor: '#303133',
				},
				tip: '',
				time: '0.000秒',
				empty: '空枪!',
				img: '',
				tipFlag: false,
				shareFlag: false,
				startFlag: false,
				playText: '',
				isOpen: false, 
				isOk: false,
				openTime: 0, 
				startImg: '../../static/img/A.png',
				endImg: '../../static/img/B.png',
				startText: '上子弹',
				endText: '开枪',
				timer: null,
				startTime: 0,
				gameTime: 0,
				appName: '',
				userId: 0,
				adFlag: false,
			}
		},
		onLoad(options) {
			this.tip = this.time;
			this.img = this.startImg;
			this.playText = this.startText;
		},
		methods: {
			playBtn() {
				if(this.startFlag){
					this.clearTime(); 
					// 开枪
					this.img = this.startImg;
					this.startFlag = false;
					this.playText = this.startText;
					if(this.isOpen){
						this.isOk = true;
						var time  = (new Date().getTime() - this.openTime)/1000;
						if(time < 0.5){
							this.shareFlag = true;
						}
						this.tip = time+'秒';
						this.gameTime = time;
						this.zhendong();
					}else{
						this.tipFlag = true;
						this.tip = this.empty;
					}
					
					this.playVoice();
				}else{
					// 上子弹
					this.tip = this.time;
					this.tipFlag = false;
					this.shareFlag = false;
					this.startFlag = true;
					this.playText = this.endText;
					this.img = this.endImg;
					this.startQuery();
					
					this.playGun();
				}
			},
			submitBtn() {
				console.log('提交分数'+this.gameTime);
			},
			ranBtn() {
				
			},
			addBtn() {
				
			},
			startQuery() {
			  this.clearTime();
			  this.isOpen = false;
			  this.isOk = false;
			  this.startTime = new Date().getTime();
			  this.timer = setInterval(() => {
			  	this.startPlay();
			  }, 60);
			},
			clearTime() {
			  clearInterval(this.timer);
			},
			startPlay() {
				var time = new Date().getTime() - this.startTime;
				var num = Math.floor(Math.random()*60);
				console.log(num);
				console.log("t:"+time);
				
				var minTime = this.randomRange(1000, 2000);
				console.log('m:'+minTime);
				if(num < 5 && time > minTime){
					this.clearTime();
					this.isOpen = true;
					this.openTime = new Date().getTime();
					this.img = this.startImg;
				}
			},
			randomRange(min, max) {
				return Math.floor(Math.random() * (max -min)) + min;
			},
			playGun() {
				var audio = uni.createInnerAudioContext();
				audio.src = 'https://img.rbtnet.com/638415fbdde7a302.mp3';
				audio.play();
			},
			zhendong() {
				uni.vibrateLong({
					success: function () {
						console.log('success');
					}
				});
			},
			playVoice() {
				var audio = uni.createInnerAudioContext();
				audio.src = 'https://img.rbtnet.com/5c88af299e50946800.mp3';
				audio.play();
			},
			startGame() {
				if(this.adFlag){
					this.playBtn();
					return;
				}
				this.openAd();
			}, 
			openAd() { 
				var _this = this;
				uni.showModal({
				  title: '提示',
				  content: '模拟广告',
				  cancelText: '没有看完',
				  confirmText: '看完了',
				  success: (res) => {
				    if (res.confirm) {
						_this.adFlag = true;
				    }
				  }
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #303133;
	}
</style>

<style lang="scss" scoped>
	.game-box {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding: 15px;
		padding-top: 0;
	}
	.tip-box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: #fff;
		font-size: 28rpx;
		margin-bottom: 30px;
		height: 70px;
	}
	.tip {
		color: #fff;
		font-size: 70rpx;
		letter-spacing: 5rpx;
	}
	.tip-desc {
		font-size: 24rpx;
	}
	.img {
		width: 500rpx;
		height: 500rpx;
		border-radius: 100%;
	}
	
	.img-box {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.img-line {
		position: absolute;
		width: 100%;
		height: 2px;
		background-color: #303133;
	}
	
	.img-top {
		position: absolute;
		width: 100%;
		height: 2px;
		background-color: #303133;
		transform: rotate(90deg);
	}
	
	.img-dot {
		width: 4px;
		height: 4px;
		border-radius: 100%;
		background-color: #fa3534;
		position: absolute;
	}
	
	.submit-btn {
		background-color: #ff9900;
		padding: 10px 20px;
		border-radius: 20px;
		margin-top: 80rpx;
		font-size: 28rpx;
	}
	
	.play-btn {
		border: 2px solid #fff;
		border-radius: 50px;
		font-size: 36rpx;
		color: #fff;
		width: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px 0;
		position: absolute;
		bottom: 140rpx;
		font-weight: bolder;
		letter-spacing: 20rpx;
	}
	
	.left-box {
		position: fixed;
		left: 0;
		color: #fff;
		font-size: 14px;
		top: 200rpx;
	}
	
	.rank-btn {
		width: 24px;
		display: flex;
		text-align: center;
		background-color: #fcbd71;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		padding: 5px 0;
	}
	
	.right-box {
		position: fixed;
		right: 0;
		color: #fff;
		font-weight: bolder;
		font-size: 16px;
		bottom: 400rpx;
	}
	
	.tab-btn {
		width: 47px;
		height: 47px;
		background-color: #ff9900;
		text-align: center;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		margin-bottom: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	button {
		padding: 0;
		margin: 0;
		line-height: normal;
		background-color: unset;
		color: #fff;
		font-weight: bolder;
		font-size: 16px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	button::after{ 
		border: none;
	}
</style>
